import React, { Component } from 'react';
import { Form, Input, Row, Col } from 'antd';
import styles from './password.css'

const FormItem = Form.Item;


export default class Password extends Component {

    constructor(props) {
        super();
        this.state = {
        }
    }
    handleSubmitPassword = (msg) => {
        this.props.form.validateFields(
            (err, value) => {
                if (!err) {
                    console.log('success');
                    msg = {
                        flag: true,
                        valueData: value
                    }
                    this.props.transferMsg(msg);
                    console.log(value)
                }
            }
        )
    }

    /**
     *  验证两次输入的密码
     * @param rule
     * @param value
     * @param callback
     */
    checkPassword = (rule, value, callback) => {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
            callback('两次密码输入不一致！');
        } else {
            callback();
        }
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },

        };
        return (
            <div className={styles.container}>
                <p className={styles.title}>交易密码设置：</p>
                <Form onSubmit={this.handleSubmit} className={styles.from}>
                    <div className="inputItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="设置密码"
                                    hasFeedback
                                >
                                    {getFieldDecorator('password', {
                                        rules: [
                                            { required: true, message: '请输入密码！' },
                                            { pattern: /^[1-9][0-9]{5}$/, message: '请输入符合规则的密码！' }
                                        ],
                                        validateFirst: true,
                                        // initialValue: '888888'
                                    })(
                                        <Input placeholder="请输入密码" maxLength='11' type='password' onBlur={this.handlePasswordBlur} />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div className="inputItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="确认密码"
                                    hasFeedback
                                >
                                    {getFieldDecorator('passwordAgain', {
                                        rules: [
                                            { required: true, message: '请输入确认密码!' },
                                            { validator: this.checkPassword }

                                        ],
                                        validateFirst: true,
                                        // initialValue: '888888'
                                    })(
                                        <Input placeholder="请输入确认密码" maxLength='11' type='password' />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div>
                        <Row>
                            <Col span={18}>
                                <Row>
                                    <Col span={6}></Col>
                                    <Col span={18} className={styles.msg}>
                                        <span>温馨提示：请妥善保管好您的交易密码，不要告知他人！</span>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </div>
                </Form>
            </div>
        );
    }
}
Password = Form.create({})(Password);